<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<style>
    *{
        margin:0px;
        padding:0px;
    }
    body{
        background:#efefef;
    }
    .page_top{
        background:white;
        padding:10px;
        padding-bottom:40px;
    }
    .photo{
        text-align: right;
        margin-bottom:20px;
    }
    .userinfo{
        display:flex;
    }
    .otherinfo{
        width:100%;
    }
    .userpic{
        margin-right:10px;
    }
    .userpic img{
        width:70px;
        border-radius:4px;
    }
    .nickname{
        font-size:20px;
        font-weight:bold;
        margin-bottom:24px;
    }
    .wechat_no{
        width:70%;
        color:#999;
    }
    .icons{
        width:30%;
        text-align: right;
    }
    .icons img{
        margin-left:10px;
    }
    .more{
        display:flex;
        justify-content: space-between;
        width:100%;
    }

    .list_item{
        display:flex;
        justify-content: space-between;
        align-items: center;
        background:white;
        padding:10px;
        position:relative;
    }
    .pictxt{
        display: flex;
        align-items: center;
    }
    .pictxt img{
        margin-left:20px;
    }
    .list .txt{
        margin-left:20px;
    }

    .line{
        width:80%;
        height:1px;
        background:#efefef;
        position:absolute;
        right:0px;
        bottom:0px;
    }
    .list{
        margin-top:10px;
        margin-bottom:10px;
    }
    .tabbar{
        position:fixed;
        width:100%;
        left:0px;
        bottom:0px;
        display:flex;background:white;padding-top:5px;}
    .tab{ padding-bottom:5px;width:25%;font-size:12px;text-align: center;
        position:relative}
    .tabbar .txt{margin-top:2px;}
    .notice{
        position:absolute;
        left:52%;top:-3px;
        width:14px;height:14px;
        line-height:14px;text-align: center;
        font-size:8px;background:red;
        color:white;
        border-radius: 50%;
    }
    .item{
  display:flex; 
}


.top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  width:100%;
  background:#efefef;
}
.weixin{
 margin:20px;
 font-weight:bold;
}
.right{
 margin:10px;

}

.item_list{  
  background:white;
  padding:2px;
 
}
.item{
  display:flex; 
}
.item1{
  display:flex;
   justify-content: space-between;
}
.pic{
 border-radius:10px;
 padding:2px;
 margin:2px;
}
.list{
  width:100%;
  padding:5px;
}
.date{
  font-size:12px;
  color:#999;
  padding:2px;
}
.massage{
  font-size:12px;
  color:#999;
  padding:2px;
}
.name{
 font-weight:bold;
 padding:2px;
}



.tabbar{
  position:fixed;
  width:100%;
  left:0px;
  bottom:0px;
  display:flex;
  background:white;
  padding-top:5px;
}
.tab{ 
  padding-bottom:5px;
  width:25%;
  font-size:12px;
  text-align: center;
  position:relative
}
.tabbar .txt{
  margin-top:2px;
}

.line{
  width:80%;
  height:3px;
  background:#efefef;
  position:absolute;
  right:0px;
  bottom:0px;
  }
    .listtop{
        margin-top:16px;
        margin-bottom:15px;
    }

</style>

<div class="all">
    <!-- 页面头部 -->
    <div class="listtop list">
    <center>
        <b>
            <div class="txt" >通讯录</div>
        </b>     
    </center> 
  </div>

    <div class="content">
            <div class="listsearch">


</div>

    <!-- /页面头部 -->

    <!-- 页面列表 -->
<div class="item_list">
   <div class="item">
   <div class="line"></div>
      <div class="pic">
          <img src="lbxx.jpeg"  width="46px" />
      </div>
      <div class="list">
          <div class="item1">
             <div class="name">深田えいみ</div>
             <div class="date">1月4日</div>  
         </div>  
      <div class="massage">あなたを想っています</div>
       </div>
  </div>


<div class="item">
      <div class="line"></div>
      <div class="pic">
          <img src="ly.jpg"  width="46px" />
      </div>
      <div class="list">
          <div class="item1">
             <div class="name">铃原エミリ</div>
             <div class="date">1月4日</div>  
         </div>  
      <div class="massage">あなたのことが好きです</div>
       </div>
  </div>



<div class="item">
      <div class="pic">
          <img src="4.png"  width="46px" />
      </div>
      <div class="list">
          <div class="item1">
             <div class="name">订阅号消息</div>
             <div class="date">1月2日</div>  
         </div>  
      <div class="massage">图书情报专圈</div>
       </div>
  </div>
</div>

    <!-- /页面列表 -->

    <!-- 底部导航 -->
    <div class="tabbar">
        <div class="tab">
            <img src="2.png" width="28" />
            <div class="txt" style="color:#0e932e">微信</div>
            <div class="notice">5</div>
        </div>
        <div class="tab">
           <a href="2.html">
            <img src="3.png" width="28" />
            <div class="txt">通讯录</div>
           </a>  
        </div>
        <div class="tab">
           <a href="3.html">
            <img src="5.png" width="28" />
            <div class="txt">发现</div>
           </a>  
        </div>
        <div class="tab">
           <a href="4.html">
            <img src="7.png" width="28" />
            <div class="txt">我</div>
           </a>  
        </div>
    </div>
    <!-- /底部导航 -->
</div>
